<template>
    <Row :gutter="24">{{productlist}}
        <Col span="4" v-for="item in productlist" :value="item.value":key="item.value">
        	<div class="product-list">
            	<p>{{item.name}}</p>
				<p>类别：{{item.type}}</p>
			</div>
			<div class="product-list-inf">
				<p class="pb10">{{item.remark}}</p>
				<p class="mt10 text-c"><a href="/product/introduce.html?id=4" class="more">更多</a></p>
			</div>
        </Col>
    </Row>
</template>
<script>
export default {
	data () {
        return {
            productlist: [
                {
                    value: 'New York',
                    label: 'New York'
                },
                {
                    value: 'London',
                    label: 'London'
                },
                {
                    value: 'Sydney',
                    label: 'Sydney'
                },
                {
                    value: 'Ottawa',
                    label: 'Ottawa'
                },
                {
                    value: 'Paris',
                    label: 'Paris'
                },
                {
                    value: 'Canberra',
                    label: 'Canberra'
                }
            ],
            model1: '',
            search:{
                productType:'',
                pageNum:1,
                pageSize:8
            }
        }
    },
	created () {
        this.dataList();
    },
    methods:{
        dataList () {
            let vm = this;
            this.$http({method:'get',url:this.$api.product.list},this.search).then(function (response) {
                //if (response.code === 1) {
                    console.log(response);
                    vm.productlist = response.list;
                //} else vm.$Message.error(res.msg);
            });
        }
    }

}
</script>


<style scoped>
.product-list{border-left: solid 2px #49a0f5; font-size: 16px; font-weight: normal; padding: 20px; background: #fff;}
.product-list p{margin-top:5px;}
.product-list-inf{background: #eeeeee; padding: 20px; font-size: 14px; color: #747474;}
a.more {color: #49a0f5; border-radius: 20px; border: solid 1px #49a0f5; width: 100%; margin: auto; margin-top: 15px; padding: 7px 33px; text-align: center;}
</style>